<!DOCTYPE html>
<html lang="en" class="h100">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./js/flex.js"></script>
  <link rel="stylesheet" href="./js/layui/css/layui.css">
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/style.css">
  <script src="./js/jquery.js"></script>
  <script src="./js/layui/layui.js"></script>
</head>
<body class="h100">
  <div class="return-box">
    <a href="javascript:;" class="title top-return-btn"><img src="images/return.png" class="r-icon" />排行榜</a>
  </div>
  <div class="rank-box">
    <div class="tab-box">
      <ul class="tab-btn">
        <li class="active">刷题数量</li>
        <li>坚持天数</li>
      </ul>
      <div class="tab-content">
        <div class="tab-wrap-box active">
          <ul class="list">
            <li>
              <div class="m-box">
                <img class="r-icon" src="images/r-1.png">
                <i class="pr i-box">
                  <img class="user-icon" src="images/user.png">
                  <img class="hat" src="images/hat.png"></i>
                <i class="name">张三</i>
              </div>
              <div class="r-box">88077题</div>
            </li>
            <li>
              <div class="m-box">
                <img class="r-icon" src="images/r-2.png">
                <i class="pr i-box">
                  <img class="user-icon" src="images/user.png">
                  <img class="hat" src="images/hat.png"></i>
                <i class="name">张三</i>
              </div>
              <div class="r-box">88077题</div>
            </li>
            <li>
              <div class="m-box">
                <img class="r-icon" src="images/r-3.png">
                <i class="pr i-box">
                  <img class="user-icon" src="images/user.png">
                  <img class="hat" src="images/hat.png"></i>
                <i class="name">张三</i>
              </div>
              <div class="r-box">88077题</div>
            </li>
            <li>
              <div class="m-box">
                <i class="r-icon">4</i>
                <i class="pr i-box">
                  <img class="user-icon" src="images/user.png">
                  <img class="hat" src="images/hat.png"></i>
                <i class="name">张三</i>
              </div>
              <div class="r-box">88077题</div>
            </li>
            <li>
              <div class="m-box">
                <i class="r-icon">4</i>
                <i class="pr i-box">
                  <img class="user-icon" src="images/user.png">
                  <img class="hat" src="images/hat.png"></i>
                <i class="name">张三</i>
              </div>
              <div class="r-box">88077题</div>
            </li>
            <li>
              <div class="m-box">
                <i class="r-icon">4</i>
                <i class="pr i-box">
                  <img class="user-icon" src="images/user.png">
                  <img class="hat" src="images/hat.png"></i>
                <i class="name">张三</i>
              </div>
              <div class="r-box">88077题</div>
            </li>
            <li>
              <div class="m-box">
                <i class="r-icon">4</i>
                <i class="pr i-box">
                  <img class="user-icon" src="images/user.png">
                  <img class="hat" src="images/hat.png"></i>
                <i class="name">张三</i>
              </div>
              <div class="r-box">88077题</div>
            </li>
            <li>
              <div class="m-box">
                <i class="r-icon">4</i>
                <i class="pr i-box">
                  <img class="user-icon" src="images/user.png">
                  <img class="hat" src="images/hat.png"></i>
                <i class="name">张三</i>
              </div>
              <div class="r-box">88077题</div>
            </li>
            <li>
              <div class="m-box">
                <i class="r-icon">5</i>
                <i class="pr i-box">
                  <img class="user-icon" src="images/user.png">
                  <img class="hat" src="images/hat.png"></i>
                <i class="name">张三</i>
              </div>
              <div class="r-box">88077题</div>
            </li>
            <li>
              <div class="m-box">
                <i class="r-icon">6</i>
                <i class="pr i-box">
                  <img class="user-icon" src="images/user.png">
                  <img class="hat" src="images/hat.png"></i>
                <i class="name">张三</i>
              </div>
              <div class="r-box">88077题</div>
            </li>
            <li>
              <div class="m-box">
                <i class="r-icon">7</i>
                <i class="pr i-box">
                  <img class="user-icon" src="images/user.png">
                  <img class="hat" src="images/hat.png"></i>
                <i class="name">张三</i>
              </div>
              <div class="r-box">88077题</div>
            </li>
          </ul>
          <div class="rank-bottom">你已经刷了<i class="c-are">198</i>道题，加油！</div>
        </div>
        <div class="tab-wrap-box">
          <ul class="list">
            <li>
              <div class="m-box">
                <img class="r-icon" src="images/r-1.png">
                <i class="pr i-box">
                  <img class="user-icon" src="images/user.png">
                  <img class="hat" src="images/hat.png"></i>
                <i class="name">张三</i>
              </div>
              <div class="r-box">120天</div>
            </li>
            <li>
              <div class="m-box">
                <img class="r-icon" src="images/r-2.png">
                <i class="pr i-box">
                  <img class="user-icon" src="images/user.png">
                  <img class="hat" src="images/hat.png"></i>
                <i class="name">张三</i>
              </div>
              <div class="r-box">120天</div>
            </li>
            <li>
              <div class="m-box">
                <img class="r-icon" src="images/r-3.png">
                <i class="pr i-box">
                  <img class="user-icon" src="images/user.png">
                  <img class="hat" src="images/hat.png"></i>
                <i class="name">张三</i>
              </div>
              <div class="r-box">120天</div>
            </li>
            <li>
              <div class="m-box">
                <i class="r-icon">4</i>
                <i class="pr i-box">
                  <img class="user-icon" src="images/user.png">
                  <img class="hat" src="images/hat.png"></i>
                <i class="name">张三</i>
              </div>
              <div class="r-box">120天</div>
            </li>
            <li>
              <div class="m-box">
                <i class="r-icon">4</i>
                <i class="pr i-box">
                  <img class="user-icon" src="images/user.png">
                  <img class="hat" src="images/hat.png"></i>
                <i class="name">张三</i>
              </div>
              <div class="r-box">120天</div>
            </li>
            <li>
              <div class="m-box">
                <i class="r-icon">4</i>
                <i class="pr i-box">
                  <img class="user-icon" src="images/user.png">
                  <img class="hat" src="images/hat.png"></i>
                <i class="name">张三</i>
              </div>
              <div class="r-box">120天</div>
            </li>
            <li>
              <div class="m-box">
                <i class="r-icon">4</i>
                <i class="pr i-box">
                  <img class="user-icon" src="images/user.png">
                  <img class="hat" src="images/hat.png"></i>
                <i class="name">张三</i>
              </div>
              <div class="r-box">120天</div>
            </li>
            <li>
              <div class="m-box">
                <i class="r-icon">4</i>
                <i class="pr i-box">
                  <img class="user-icon" src="images/user.png">
                  <img class="hat" src="images/hat.png"></i>
                <i class="name">张三</i>
              </div>
              <div class="r-box">120天</div>
            </li>
            <li>
              <div class="m-box">
                <i class="r-icon">5</i>
                <i class="pr i-box">
                  <img class="user-icon" src="images/user.png">
                  <img class="hat" src="images/hat.png"></i>
                <i class="name">张三</i>
              </div>
              <div class="r-box">120天</div>
            </li>
            <li>
              <div class="m-box">
                <i class="r-icon">6</i>
                <i class="pr i-box">
                  <img class="user-icon" src="images/user.png">
                  <img class="hat" src="images/hat.png"></i>
                <i class="name">张三</i>
              </div>
              <div class="r-box">120天</div>
            </li>
            <li>
              <div class="m-box">
                <i class="r-icon">7</i>
                <i class="pr i-box">
                  <img class="user-icon" src="images/user.png">
                  <img class="hat" src="images/hat.png"></i>
                <i class="name">张三</i>
              </div>
              <div class="r-box">120天</div>
            </li>
          </ul>
          <div class="rank-bottom">你已经坚持<i class="c-are">120</i>天，加油！</div>
        </div>
      </div>
    </div>
  </div>
  
  <script src="./js/main.js"></script>
</body>
</html>